.lunbo {
    width: 700px;
    height: 500px;
    position: relative;
}
.lunbo .lunbo-img {
    width: 100%;
    height: 100%;
}

.lunbo-left,
.lunbo-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    width: 34px;
    text-align: center;
    height: 34px;
    line-height: 28px;
    border-radius: 50%;
    color: #ccc;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .5);
}

.lunbo-left {
    left: 18px;
}

.lunbo-right {
    right: 18px;
}

/*
    <div class="lunbo row">
        <span class="lunbo-left">&lt;</span>
        <img src="./bo2.png" alt="" class="lunbo-img" width="700">
        <span class="lunbo-right">&gt;</span>
    </div>

    注意 lunbo 与轮播图片宽度一致

  let left = document.querySelector('.lunbo-left')
  let right = document.querySelector('.lunbo-right')
  let img = document.querySelector('.lunbo-img')
  let i = 1;
  const playTime = () => {
    timer = setInterval(() => {
      img.src = `./images/bo${((i++ % 3 + 1) - 1) % 3 + 1}.png`
    }, 2000)
  }
  playTime()
  left.addEventListener("click", function () {
    clearInterval(timer)
    img.src = `./images/bo${((i++ % 3 + 1) - 1) % 3 + 1}.png`
  });
  right.addEventListener("click", function () {
    clearInterval(timer)
    img.src = `./images/bo${((i++ % 3 + 1) - 1) % 3 + 1}.png`
  });
  left.addEventListener("mouseenter", function () {
    clearInterval(timer);
  });
  left.addEventListener("mouseleave", playTime);
  right.addEventListener("mouseenter", function () {
    clearInterval(timer);
  });
  right.addEventListener("mouseleave", playTime);
*/